<script lang="ts">

    import { goto } from "$app/navigation";
    import { stringify } from "postcss";

    function routeToPage(route: string, replaceState: boolean) {
        console.log("call routeToPage ", route, replaceState);
        goto(`${route}`, { replaceState });
    }

    import { page } from "$app/stores";
    import Part1InvestmentBasics from "./Part1_InvestmentBasics.svelte";
    import Part2InvestmentStrategies from "./Part2_InvestmentStrategies.svelte";
    import Part3BuildingaPortfolio from "./Part3_BuildingaPortfolio.svelte";
    import Part4StudyingaStock from "./Part4_StudyingaStock.svelte";

    import { tooltip } from "$lib/js/tooltip";
    export let selected = "part1";
</script>

<div class="px-4">
    <div>
        <div class="mb-4">
            <div class="flex flex-row">
                <h1 class="text-green-500 my-4 text-4xl font-extrabold mr-8">Value Line University</h1>
                <h1 class="text-gray-400 my-4 text-4xl font-extrabold cursor-pointer" on:click={(event) => {
                    console.log("tr click event=", JSON.stringify(event));
                    routeToPage("/value_line_understanding_research", true);
                }}>Understanding Value Line Research</h1>
            </div>
            <p>
                Value Line has been providing investment research since 1931.
                Value Line was built upon our founder's passion for discipline
                and objectivity as it applied to the basic analysis of a
                company's financial statements. Value Line University was
                created to help people take that same passion and apply it to
                their own investment portfolios.
            </p>
        </div>
    </div>
    <ul class="flex flex-row my-2">
        <li
            class="flex-1  h-12 cursor-pointer {selected === 'part1'
                ? 'bg-rose-400'
                : 'bg-cyan-300'}"
            use:tooltip={{ theme: "material" }}
            title="Part 1: Investment Basics"
            on:click={(event) => {
                selected = "part1";
                console.log("got click home /", event);
            }}
        >
            Part 1: Investment Basics
        </li>
        <li
            class="flex-1 mx-2 cursor-pointer  {selected === 'part2'
                ? 'bg-rose-400'
                : 'bg-cyan-300'}"
            use:tooltip={{ theme: "material" }}
            title="Part 2: Investment Strategies"
            on:click={(event) => {
                selected = 'part2';
                console.log("got click home /", event);
            }}
        >
            Part 2: Investment Strategies
        </li>
        <li
            class="flex-1 mr-2 cursor-pointer  {selected === 'part3'
                ? 'bg-rose-400'
                : 'bg-cyan-300'}"
            use:tooltip={{ theme: "material" }}
            title="Part 3: Building a Portfolio"
            on:click={(event) => {
                selected = 'part3';
                console.log("got click home /", event);
            }}
        >
            Part 3: Building a Portfolio
        </li>
        <li
            class="flex-1 cursor-pointer  {selected === 'part4'
                ? 'bg-rose-400'
                : 'bg-cyan-300'}"
            use:tooltip={{ theme: "material" }}
            title="Part 4: Studying a Stock"
            on:click={(event) => {
                selected = 'part4';
                console.log("got click home /", event);
            }}
        >
            Part 4: Studying a Stock
        </li>
    </ul>
    

    {#if selected === "part4"}
        <Part4StudyingaStock />
    {:else if selected === "part3"}
        <Part3BuildingaPortfolio />
    {:else if selected === "part2"}
        <Part2InvestmentStrategies />
    {:else}
        <Part1InvestmentBasics />
    {/if}
</div>
